<template>
  <div>
    <el-card
      class="main-head"
      v-if="
        $route.meta.isTab &&
        $route.name !== 'platform-feature/create/edit/index' &&
        $route.name !== 'platform-decorate/create/edit/index'
      "
    >
      <el-breadcrumb
        style="display: flex; align-items: flex-end;"
        separator-class="el-icon-arrow-right"
      >
        <div class="back" @click="$router.back()">
          <el-link type="primary"><i class="el-icon-arrow-left"></i>返回</el-link>
        </div>
        <el-breadcrumb-item
          v-for="(item, index) in selectMenu"
          :key="index"
          class="breadcrumb-item"
        >
          <span>{{ item }}</span>
        </el-breadcrumb-item>
      </el-breadcrumb>
    </el-card>
    <main
      class="site-content"
      :class="{
        'site-content--tabs': $route.meta.isTab,
        'padding-none':
          $route.name === 'platform-feature/create/edit/index' ||
          $route.name === 'platform-decorate/create/edit/index',
      }"
    >
      <!-- 主入口标签页 (发布商品) -->
      <div
        v-if="$route.name === 'prod-post-product/postProduct'"
        :style="siteContentViewHeight"
      >
        <keep-alive>
          <router-view />
        </keep-alive>
      </div>
      <!-- 新增/编辑装修页 -->
      <div
        v-if="
          $route.name === 'platform-feature/create/edit/index' ||
          $route.name === 'platform-decorate/create/edit/index'
        "
      >
        <router-view />
      </div>
      <el-card
        :style="{
          'border-radius': '0 !important',
          'min-height':
            $route.name === 'platform-decorate/create/select-decorate/index'
              ? 'auto'
              : 'calc(100vh - 130px)',
          'box-shadow': 'none',
        }"
        :class="[compNoPadding ? 'no-padding-el-card' : '']"
        :body-style="siteContentViewHeight"
        v-else-if="homeHidden"
      >
        <keep-alive :include="includePageList">
          <router-view />
        </keep-alive>
      </el-card>
      <div v-else>
        <router-view />
      </div>
    </main>
    <!-- <audio src="../assets/voice/new-msg.mp3" autoplay=""></audio> -->
  </div>
</template>

<script>
window.tapNotify = function (msg) {
  console.log("1111111");
};
import { isURL } from "@/utils/validate";
export default {
  data() {
    return {};
  },
  computed: {
    siteContentViewHeight() {
      var height = this.documentClientHeight - 50 - 30 - 2;
      if (this.$route.meta.isTab) {
        height -= 40;
        return isURL(this.$route.meta.iframeUrl)
          ? { height: height + "px" }
          : { minHeight: height + "px" };
      }
      return { minHeight: height + "px" };
    },
    selectMenu: {
      get() {
        return this.$store.state.common.selectMenu;
      },
    },
    includePageList: {
      get() {
        return this.$store.state.router.includePageList;
      },
    },
    homeHidden: {
      get() {
        return this.$route.name !== "home";
      },
    },
    compNoPadding: {
      get() {
        let noPaddingPaths = ["TakeOutRider-manualAssignment/index"];
        return noPaddingPaths.includes(this.$route.name);
      },
    },
  },
  mounted() {
    // this.pollingUnreviewStatistics();
  },
  methods: {
    pollingUnreviewStatistics() {
      this.$http({
        url: this.$http.adornUrl("/platform/statistics/getPlatformStatistics"),
        method: "GET",
      }).then(({ data }) => {
        let pendingToday = {
          prodAuditNum: data.prodAuditNum, // 商品违规审核数量
          shopAuditNum: data.shopAuditNum, // 待审核店铺数量
          bannerAuditNum: data.bannerAuditNum, // 审核轮播图数量
        };
        this.$notify({
          dangerouslyUseHTMLString: true,
          message:
            '<a style="cursor: pointer;" onclick="tapNotify()">您有一条新的待审批消息</a>',
          offset: 100,
          duration: 0,
        });
        console.log(pendingToday);
      });
      setTimeout(() => {
        this.pollingUnreviewStatistics();
      }, 3000);
    },
  },
};
</script>
<style scoped>
.main-head {
  background: #ffffff;
  width: 100%;
  height: 40px;
  position: fixed;
  top: 50px;
  z-index: 10;
  display: flex;
  align-items: center;
  border-radius: 0;
  box-shadow: none;
  border-top: none;
}
.breadcrumb-item:last-child span {
  color: #155bd4 !important;
}
.main-head .title {
  color: #999999;
}
.main-head .router {
  color: #155bd4;
}

.padding-none {
  padding: 0 !important;
}
.back{
  margin-right: 30px;
}
</style>
<style>
.el-input__inner {
  border-radius: 3px;
  padding: 0 10px !important;
}
.el-date-editor .el-input__inner {
  padding-left: 30px !important;
}
.el-date-editor .el-range-separator,
.el-input__suffix,
.el-date-editor .el-input__icon,
.el-date-editor .el-range__icon {
  display: flex;
  align-items: center;
}
.el-input-group--append .el-input__inner {
  border-radius: 3px 0 0 3px !important;
}
.el-input-group--prepend .el-input__inner {
  border-radius: 0 3px 3px 0 !important;
}
.el-input-group--prepend.el-input-group--append .el-input__inner {
  border-radius: 0 0 0 0 !important;
}
.el-form--inline .el-form-item {
  margin-right: 20px;
}
</style>
